/**
 * STYLE VARIABLES
 */
:root {
  --brand-color4: #e3f2fd;
  --brand-color3: #bbdefb;
  --brand-color2: #90caf9;
  --brand-color1: #64b5f6;
  --brand-color0: #42a5f5;
}

/**
 * ICONS
 */
/* From https://github.com/jupyterlab/jupyterlab/blob/master/packages/theme-light-extension/style/icons/jupyter/notebook.svg */
.jp-Toolbar-gatherbutton-BookIcon {
  background-image: url("icons/notebook.svg");
}

/* From https://github.com/jupyterlab/jupyterlab/blob/master/packages/theme-light-extension/style/icons/md/close.svg */
.jp-Toolbar-gatherbutton-ClearIcon {
  background-image: url("icons/clear.svg");
}

/* The following icons were generated from style/icons/icons.afdesign */
.jp-Toolbar-gatherbutton-HistoryIcon {
  background-image: url("icons/history.svg");
}

.jp-Toolbar-gatherbutton-CellsIcon {
  background-image: url("icons/cells.svg");
}

/**
 * TOOLBAR BUTTONS
 */
.jp-Toolbar-gatherlabel {
  float: left;
  vertical-align: middle;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 4px;
}

.jp-Toolbar-gatherbutton.jp-Toolbar-gatherbutton-inactive {
  opacity: 0.8;
}

.jp-Toolbar-gatherbutton.jp-Toolbar-button-glow
  button.jp-ToolbarButtonComponent:hover {
  background-color: var(--brand-color3);
}

.jp-Toolbar-button-glow
  button.jp-ToolbarButtonComponent.jp-Toolbar-clearbutton:hover {
  background-color: #eeeeee;
}

.jp-Toolbar-gatherbutton.jp-Toolbar-button-glow
  button.jp-ToolbarButtonComponent {
  background-color: var(--brand-color4);
}

.jp-Toolbar-button-glow
  button.jp-ToolbarButtonComponent.jp-Toolbar-clearbutton {
  background-color: #f4f4f4;
}

span.jp-GatherLabel {
  margin-top: -2px;
  margin-right: 0.2em;
}

.jp-GatherSpacer {
  width: 1em;
}

/**
 * VARIABLE HIGHLIGHTS
 */
.jp-InputArea-editor-nametext {
  font-weight: bold;
  background-color: var(--brand-color3);
  border-radius: 3px;
  padding: 1px;
}

.jp-InputArea-editor-nametext:hover {
  background-color: var(--brand-color2);
  cursor: pointer;
}

.jp-InputArea-editor-nametext.jp-InputArea-editor-nametext-selected {
  box-shadow: inset 0 0 2px #222222; /* border */
  background-color: var(--brand-color2);
}

.jp-InputArea-editor-nameline-selected:after {
  content: "★";
  position: absolute;
  right: 14px;
  font-weight: bold;
}

div.CodeMirror-linebackground.jp-InputArea-editor-dirtydependencyline {
  background-color: #f7d3cf;
}

div.CodeMirror-linebackground.jp-InputArea-editor-dependencyline {
  background-color: #e6d4f4;
}

/**
 * OUTPUT HIGHLIGHTS
 */
.jp-OutputArea-highlighted {
  border: 1px solid var(--brand-color3);
  border-radius: 3px;
  overflow: visible;
}

.jp-OutputArea-highlighted:hover {
  box-shadow: inset 0 0 5px var(--brand-color2);
}

.jp-OutputArea-gather-button-parent,
.jp-OutputArea-gather-button-parent.jp-OutputArea {
  box-sizing: border-box;
  position: static;
}

/**
 * WITHIN-CELL GATHER BUTTON
 */
.jp-OutputArea-highlighted:not(.jp-OutputArea-selected)
  .jp-OutputArea-gatherbutton {
  opacity: 0;
}

.jp-OutputArea-highlighted .jp-OutputArea-gatherbutton {
  border: 1px solid var(--brand-color3);
  border-radius: 3px 3px 0px 0px;
  border-bottom-style: none;
  cursor: pointer;
  padding: 0.25em 1em;
  position: absolute;
  height: min-content;
  right: 10px;
  background: white;
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
  line-height: var(--jp-content-line-height);
  margin-bottom: 0em;
  opacity: 0;
  transition-property: background-color, visibility;
  transition-duration: 0.15s, 0s;
  transition-timing-function: linear;
  z-index: 1000000;
}

.jp-OutputArea-highlighted .jp-OutputArea-gatherbutton:hover {
  background: rgb(217, 236, 252);
  cursor: pointer;
}

.jp-OutputArea-highlighted:hover .jp-OutputArea-gatherbutton,
.jp-OutputArea-highlighted .jp-OutputArea-gatherbutton:hover {
  opacity: 1;
  cursor: default;
}

.jp-OutputArea-gatherbutton .jp-OutputArea-gathercheckbox {
  margin: 0;
}

.jp-OutputArea-gatherbutton * {
  cursor: pointer;
  display: inline;
}

.jp-OutputArea-highlighted.jp-OutputArea-selected {
  box-shadow: inset 0 0 10px var(--brand-color0);
}

.jp-OutputArea-highlighted.jp-OutputArea-selected .jp-OutputArea-gatherbutton {
  background: var(--brand-color3);
  background-blend-mode: multiply;
  visibility: visible;
  opacity: 1;
}

.jp-OutputArea-highlighted.jp-OutputArea-selected:after {
  position: absolute;
  top: 6px;
  right: 14px;
  font-weight: bold;
}

.jp-OutputArea-child {
  overflow: visible;
}

.jp-Notebook :not(.jp-mod-active).jp-Cell .jp-OutputPrompt {
  /* XXX: Don't make the prompt translucent; make just its text translucent, so the gather buttons	
     can be opaque. */
  color: rgba(0, 0, 0, 0.32);
  opacity: 1;
}

.jp-OutputArea {
  overflow-y: visible;
  overflow: visible;
}

.jp-OutputPrompt {
  overflow: visible;
}

/**
 * NOTIFICATIONS
 */
.jp-Toolbar-notification {
  margin-top: -2px;
}

/**
 * VERSION BROWSER
 */
.jp-HistoryViewer {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  margin: auto;
}

.jp-HistoryViewer .jp-Revision {
  display: inline-block;
  vertical-align: top;
}

.jp-HistoryViewer-referenceversion {
  max-width: 500px;
}

.jp-HistoryViewer-olderversions {
  max-width: 500px;
}

.jp-Revision {
  display: inline-block;
  height: 99%;
  vertical-align: top;
  background-color: #eee;
  width: 500px;
  padding-left: 2em;
  padding-right: 2em;
}

.jp-Revision-notebook {
  height: 100%;
  overflow-y: auto;
  background-color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  display: flex;
  flex-flow: column;
}

.jp-HistoryViewer-referenceversion .jp-Revision-header {
  font-weight: bold;
}

.jp-Revision-header {
  flex: 0 0 auto;
  background-color: white;
  font-size: medium;
  padding-left: 1ex;
  padding-right: 1ex;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  margin-top: 0;
}

/* Cell styling */
.jp-CellArea {
  display: flex;
  flex-direction: row;
}

.jp-SlicedCell {
  padding: var(--jp-cell-padding);
  overflow-x: auto;
  width: 100%;
}

.jp-SlicedCell .jp-SlicedCell-editor {
  border: 1px solid #cfcfcf;
  background-color: #f7f7f7;
  border-radius: 2px;
  text-align: left;
  width: 100%;
}

.jp-SlicedCell-editor-updatedtext:not(.jp-SlicedCell-editor-outofslicetext) {
  background-color: yellow;
}

.jp-SlicedCell-editor-unchangedtext {
  opacity: 1;
}

/* Every line that isn't in the slice. */
.jp-SlicedCell-editor-outofslicetext {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: lightgray;
}

.jp-SlicedCell-editor-hidetext {
  opacity: 0.5;
  font-style: italic;
}

.jp-DiffedCell-editor-aftertext.jp-DiffedCell-editor-changedtext {
  font-weight: bold;
}

.jp-DiffedCell-editor-beforebackground {
  background-color: #eaeaea;
}

.jp-DiffedCell-editor-beforetext {
  font-style: italic;
  color: #6d6d6d;
}

.jp-DiffedCell-editor-beforetext.jp-DiffedCell-editor-changedtext {
  font-weight: bold;
  background-color: #cbcbcb;
}

/* Revision cell outputs */
.jp-Notebook-revisionbrowser {
  background-color: #eee;
}

.jp-Notebook-revisionbrowser-output div.output_area {
  max-height: 5000px;
  overflow-y: auto;
}

.jp-Notebook-revisionbrowser-output div.output_area div.output_subarea {
  background-color: white;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.jp-Notebook-revisionbrowser-output .output_area:first-child {
  margin-left: 1em;
}

/* Buttons for gathering from revision browser */
.jp-Revision-buttons {
  flex: 0 0 auto;
  flex-direction: row;
  display: flex;
  margin-bottom: 0.5em;
  display: inline-block;
}

.jp-Revision-button {
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.42857143;
  height: 2em;
}

.jp-Revision-button:not(:last-child) {
  margin-right: 5px;
}

.jp-Revision-button span.jp-Revision-button-label {
  margin-left: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: nowrap;
}

.jp-Revision-cells {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/**
 * MISCELLANEOUS
 */
.p-mod-hidden {
  display: none;
}
